<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 开头 -->
      <div class="text item">
        <el-button
          style="float: right; padding: .1875rem 0 width:5rem;height:2.1875rem"
          type="primary"
          @click="hJump"
        >
          新增试题
        </el-button>
      </div>
      <!-- 选择区域 -->
      <!-- 第一行 -->
      <el-form ref="myForm" :model="formInline" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px" prop="subjectID">
              <el-select v-model="formInline.subjectID" placeholder="请选择" @change="hSubjectChange">
                <el-option v-for="(item,index) in subjectList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px" prop="catalogID">
              <el-select v-model="formInline.catalogID" placeholder="请选择">
                <el-option v-for="(item,index) in catalogList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="80px" prop="tags">
              <el-select v-model="formInline.tags" placeholder="请选择">
                <el-option v-for="(item,index) in tagList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px" style="float:right" prop="keyword">
              <el-input v-model="formInline.keyword" placeholder="请根据题干搜索" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <!-- 试题类型 -->
            <el-form-item label="试题类型" label-width="80px" prop="questionType">
              <el-select v-model="formInline.questionType" placeholder="请选择">
                <el-option label="单选" value="1" />
                <el-option label="多选" value="2" />
                <el-option label="简答" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px" prop="difficulty">
              <el-select v-model="formInline.difficulty" placeholder="请选择">
                <el-option label="简单" value="1" />
                <el-option label="一般" value="2" />
                <el-option label="困难" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction" class="direction">
              <el-select
                v-model="formInline.direction"
                placeholder="请选择"
                class="filter-item"
              >
                <el-option
                  v-for="item in directions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px" style="float:right" prop="creatorID">
              <el-select v-model="formInline.creatorID" placeholder="请选择">
                <el-option v-for="item in creatorList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="80px" prop="remarks">
              <el-input v-model="formInline.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px" prop="shortName">
              <el-input v-model="formInline.shortName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" label-width="80px">
              <el-select
                v-model="formInline.province"
                placeholder="请选择"
                style="margin-right:10px"
                class="city"
                @keyup.enter="handleFilter"
                @change="handleProvince"
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select
                v-model="formInline.city"
                placeholder="请选择"
                class="city"
                @keyup.enter="handleFilter"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" label-width="80px">
            <el-form-item style="float:right">
              <el-button @click="hClear">清除</el-button>
              <el-button type="primary" :loading="isLoading" @click="hSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 选择区结束 -->
      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      />
      <!-- table表单 -->
      <el-table
        :data="items"
        :loading="isLoading"
      >

        <el-table-column prop="number" label="试题编号" align="center" />
        <el-table-column prop="subject" label="学科" align="center" />
        <el-table-column prop="catalog" label="目录" align="center" />
        <el-table-column label="题型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else-if="scope.row.questionType === '3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" align="center">
          <template slot-scope="scope">
            <span v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | dateFormate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else-if="scope.row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" align="center" />
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <!-- 查阅 -->
            <el-button
              plain
              type="primary"
              size="small"
              icon="el-icon-view"
              circle
              @click="hPreview(scope.row.id)"
            />
            <!-- 编辑 -->
            <el-button
              plain
              type="success"
              size="small"
              icon="el-icon-edit"
              circle
              @click="hEdit(scope.row.id)"
            />
            <!-- 删除 -->
            <el-button
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="hDelete(scope.row.id)"
            />
            <!-- 精选 -->
            <el-button
              plain
              type="danger"
              size="small"
              icon="el-icon-check"
              circle
              @click="Hselected(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- page-size 每页显示条目个数  page-sizes每页显示个数选择器的选项设置 current-page当前页数-->
      <el-pagination
        class="pagebox"
        style="margin:20px 0; float: right"
        :loading="isLoading"
        background
        :current-page="page.page"
        :page-sizes="[3,6,9,12]"
        :page-size="page.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 弹出框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%">
        <!-- 第一个盒子 -->
        <el-row :gutter="20" style="padding: 0.625rem">
          <el-col
            :span="6"
          ><div>
            【题型】：
            <span v-if="content.questionType === '1'">单选</span>
            <span v-else-if="content.questionType === '2'">多选</span>
            <span v-else-if="content.questionType === '3'">简答</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div>【编号】：{{ content.id }}</div></el-col>
          <el-col
            :span="6"
          ><div>
            【难度】：
            <span v-if="content.difficulty === '1'">简单</span>
            <span v-else-if="content.difficulty === '2'">一般</span>
            <span v-else-if="content.difficulty === '3'">困难</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div>【标签】：{{ content.tags }}</div></el-col>
        </el-row>
        <el-row :gutter="20" style="padding: 0.625rem">
          <el-col
            :span="6"
          ><div>【学科】：{{ content.subjectName }}</div></el-col>
          <el-col
            :span="6"
          ><div>【目录】：{{ content.catalogID }}</div></el-col>
          <el-col
            :span="6"
          ><div>【方向】：{{ content.direction }}</div></el-col>
        </el-row>
        <hr>
        <!-- 题目 -->
        <div>
          【题干】：
          <div v-html="content.question">{{ content.question }}</div>
          <div v-if="content.questionType === '1'">
            <div>选项：（以下选中的选项为正确答案）</div>
            <el-radio-group v-model="radio">
              <el-radio
                v-for="option in content.options"
                :key="option.code"
                style="padding: 0.625rem 0; display: block"
                :label="option.isRight"
                @click.native="hPrevent"
              >{{ option.title }}</el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="content.questionType === '2'">
            <div>选项：（以下选中的选项为正确答案）</div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="option in content.options"
                :key="option.code"
                style="padding: 0.625rem 0; display: block"
                :label="option.code"
                @click.native="hPrevent"
              >{{ option.title }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <hr>
        <!--  参考答案-->
        <div>
          <div>
            【参考答案】：
            <el-button
              type="danger"
              @click="isShow = !isShow"
            >视频答案预览</el-button>
          </div>
          <video
            v-show="isShow"
            :src="content.videoURL"
            style="width: 11.25rem"
            controls="controls"
            autoplay="autoplay"
          />
        </div>
        <hr>
        <!-- 答案解析 -->
        <div>
          【答案解析】：
          <div v-html="content.answer">{{ content.answer }}</div>
        </div>
        <hr>
        <!-- 题目备注 -->
        <div>
          <!-- <div>【题目备注】：{{ contentNaNpxarks }}</div> -->
          <div>【题目备注】：{{ }}</div>

        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            :loading="isLoading"
            @click="dialogVisible = false"
          >关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { loadQuestions, remove, choiceAdd, detail } from '@/api/questions.js'
import { provinces, citys } from '@/api/citys.js'
import { simple } from '@/api/base/users.js'
import { simple as subjectSimple } from '@/api/subjects.js'
import { simple as catalogSimple } from '@/api/directorys.js'
import { simple as tagSimple } from '@/api/tags.js'
export default {
  filters: {
    dateFormate(val) {
      const date = new Date(val)
      const y = date.getFullYear()
      const m = addZero(date.getMonth() + 1)
      const d = addZero(date.getDate())
      const h = addZero(date.getHours())
      const mm = addZero(date.getMinutes())
      const s = addZero(date.getSeconds())

      return y + '-' + m + '-' + d + '  ' + h + ':' + mm + ':' + s
      function addZero(r) {
        return r < 10 ? '0' + r : r
      }
    }
  },
  data() {
    return {
      formInline: {
        direction: '',
        difficulty: '', // 难度
        subjectID: null, // 科目
        questionType: '', // 题型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      isLoading: false,
      dialogVisible: false,
      page: {
        page: 1, // 当前页码
        pagesize: 3,
        total: 0 // 总数

      },
      isShow: false,
      radio: 1, // 双向绑定单选框
      checkList: [],
      content: {
        options: [],
        questionType: '', // 题型
        id: '',
        difficulty: '', // 难度
        subjectName: '', // 科目
        catalogID: '', // 目录
        direction: '',
        tags: '',
        question: '',
        answer: '',
        remarks: '',
        videoURL: ''
      },
      alertText: '',
      total: null,
      counts: '',
      pages: '',
      items: [],
      subjectList: [],
      creatorList: [],
      catalogList: [],
      tagList: [],
      directions: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ]

    }
  },
  created() {
    this.loadQuestions()
    this.handleProvince()
    this.getCityData()
    this.creator()
    this.subject()
  },
  methods: {
    // 获取弹出框数据
    async loadPreview(objeditId) {
      this.content.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      console.log(res)
      // // 获取详情
      this.content = res
      const options = this.content.options
      for (const i in options) {
        if (options[i].isRight === 1) {
          this.checkList.push(options[i].code)
        }
      }
    },
    // 获取弹出框
    hPreview(id) {
      this.dialogVisible = true
      this.isShow = false
      this.loadPreview(id)
    },
    // 导入后台数据  基础题库列表
    async loadQuestions() {
      // 获取列表请求参数
      this.isLoading = true
      const data = {
        direction: this.formInline.direction,
        difficulty: this.formInline.difficulty, // 难度
        subjectID: this.formInline.subjectID, // 科目
        questionType: this.formInline.questionType, // 题型
        tags: this.formInline.tags, // 标签
        province: this.formInline.province, // 省份
        city: this.formInline.city, // 城市
        keyword: this.formInline.keyword, // 关键字
        // remarks: this.formInlineNaNpxarks, // 题目备注
        shortName: this.formInline.shortName, // 企业简称
        creatorID: this.formInline.creatorID, // 录入人
        catalogID: this.formInline.catalogID, // 目录
        pagesize: this.page.pagesize,
        page: this.page.page
      }
      const res = await loadQuestions(data)
      // console.log(res)
      this.items = res.data.items
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
      this.isLoading = false
    },
    // 跳转页面
    hJump() {
      this.$router.push('/questionBank/step-form')
    },
    // 获取城市
    // 获取城市
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e)
      this.page.city = this.citySelect.cityDate[0]
    },
    // 获取学科
    async subject() {
      const res = await subjectSimple()
      this.subjectList = res.data
    },
    hSubjectChange(val) {
      console.log('学科输入框变了', val)
      if (val) {
        this.formInline.catalogID = null
        this.formInline.tags = ''
      }
      this.catalog()
      this.tag()
    },
    // 获取目录
    async catalog() {
      const res = await catalogSimple()
      this.catalogList = res.data
    },
    // 获取标签
    async tag() {
      const res = await tagSimple()
      this.tagList = res.data
      // console.log('打印', res)
    },
    // 录入人
    async creator() {
      const res = await simple({
        items: [],
        creatorID: '',
        fullName: ''
      })
      // this.creatorList = res.data.items.map(item => {
      //   return item.creator
      this.creatorList = res.data.map((data) => {
        return data.username
      })
    },
    // 搜索
    hSearch() {
      this.page.page = 1
      this.loadQuestions()
    },
    //  清除
    hClear() {
      this.$refs.myForm.resetFields()
      this.formInline.city = ''
      this.formInline.province = ''
      this.loadQuestions()
    },
    // 操作----预览
    hPrevent(e) {
      e.preventDefault()
    },
    // 操作----编辑
    hEdit(id) {
      this.$router.push({ path: 'questionBank/step-form', query: { id }})
      // this.$router.push('/questions/new'+ id)
    },
    // 操作----删除
    hDelete(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          console.log(res)
          this.loadQuestions()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 操作----精选
    Hselected(id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await choiceAdd({
            id,
            choiceState: 1
          })
          console.log('jingxuan', res)
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
          this.$router.push('/questionBank/basic-form')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消加入精选'
          })
        })
    },
    // 每页数量修改事件
    handleSizeChange(val) {
      // 每页最新的页码
      this.page.pagesize = val
      this.loadQuestions()
      // console.log('可以显示多少条', page)
    },

    handleCurrentChange(newPage) {
      // newPage是当前点击的页码
      this.page.page = newPage // 将当前页码值赋值给当前最新的页码
      this.loadQuestions()
      // console.log('当前页码', page)
    },
    indexId(index) {
      const page = this.page.page // 当前页码
      const pagesize = this.page.size // 条数
      return index + 1 + (page - 1) * pagesize
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      margin-left: 20px;
      // .el-form-item__label {
      //   width: 230px !important;
      // }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}

</style>

<style scoped lang="less">
.box-card {
  margin: 0.625rem;
}
.text {
  font-size: 1.125rem;
}
.text span {
  font-size: 0.5rem;
  color: pink;
}
.text {
  margin-bottom: 0.625rem;
  height: 3.125rem;
}
.container /deep/ .el-input__inner {
  width: 11.25rem;
}
.grid-content {
  background-color: rgb(244, 244, 245);
}
.container /deep/ .pagebox .el-input__inner {
  width: 5.75rem;
}
.container /deep/ .pagebox .el-input {
  width: 7.5rem !important;
}
.container /deep/ .pagebox .el-pagination__editor {
  width: 4.0625rem !important;
}
.container /deep/ .pagebox .el-input__inner[placeholder="请选择"] {
  width: 5.3125rem !important;
}
.container /deep/ .pagebox .el-pagination__editor {
  width: 6.875rem !important;
}
.container .pagebox /deep/ .el-input__icon {
  width: 6.25rem;
}
.container /deep/ .direction {
  margin-left: 2.5rem;
}
.container /deep/ .city .el-input__inner {
  width: 5.3125rem;
}

</style>
